<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>找回密码</title>
    <style>
        #registration-form {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: 0 auto;
            transform: translate(-50%, -80%);
            justify-content: center;
            align-items: center;
        }
        #registration-form input {
            display: block;
            width: 100%; /* 设置输入框的宽度为 100% */
            margin: 10px 0px 5px 5px; /* 设置输入框之间的间距为 10px */
        }
        #send-verification-code{
            width: 50%;
            margin-left: 3%;
            margin-top: 4%;
            height: 10%
        }
        #verification{
            display: flex;
        }
    </style>
</head>
<body>
<form id="registration-form">
    <label for="email">电子邮件:</label>
    <input type="text" id="email" name="email" required>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>
    <label for="password-confirm">确认密码</label>
    <input type="password" id="password-confirm" name="passwordConfirm" required>
    <label for="verification-code">验证码:</label>
    <div id="verification">
    <input type="text" id="verification-code" name="verificationCode" required>
    <button type="button" id="send-verification-code">发送验证码</button>
    </div>
    <input type="submit" value="修改">
</form>
<script src="js/conf.js"></script>
<script>
    const sendVerificationCodeButton = document.querySelector('#send-verification-code');
    const form = document.querySelector('#registration-form');

    sendVerificationCodeButton.addEventListener('click', function() {
        const body = new FormData();
        body.append('email',form.elements.email.value);
		body.append('changepwd',true);

        if (!isValidEmail(body.get('email'))) {
            // 如果电子邮件地址无效，显示错误信息
            showErrorMessage('请输入有效的电子邮件地址');
            return;
        }
		sendVerificationCodeButton.disabled=true
        // 发送邮件验证
        fetch(url+'/emailCode',{method: 'POST', body: body}).then(response => response.json()).then(data => {alert(data.msg);});
        // 设置倒计时的剩余时间为 60
        let countdown = 60;
        // 使用 setInterval() 函数每秒钟调用一个函数
        const timer = setInterval(function() {
            // 更新按钮的文本
            sendVerificationCodeButton.innerHTML = `验证码已发送 (${countdown}s)`;

            // 减少倒计时的剩余时间
            countdown--;

            // 当倒计时结束时，停止计时器并启用按钮
            if (countdown === 0) {
                clearInterval(timer);
                sendVerificationCodeButton.innerHTML = '发送验证码';
                sendVerificationCodeButton.disabled = false;
            }
        }, 1000);
    });

    form.addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单默认提交

        const email = form.elements.email.value;
        const verificationCode = form.elements.verificationCode.value;
        const password = form.elements.password.value;
        const passwordConfirm = form.elements.passwordConfirm.value;

        // 验证电子邮件地址
        if (!isValidEmail(email)) {
            // 如果电子邮件地址无效，显示错误信息
            showErrorMessage('请输入有效的电子邮件地址');
            return;
        }

        // 验证验证码
        if (!isValidVerificationCode(verificationCode)) {
            // 如果验证码无效，显示错误信息
            showErrorMessage('验证码错误');
            return;
        }

        // 验证密码
        if (!isValidPassword(password)) {
            // 如果密码无效，显示错误信息
            showErrorMessage('密码必须至少包含 6 个字符');
            return;
        }

        // 验证确认密码
        if (password !== passwordConfirm) {
            // 如果确认密码和密码不匹配，显示错误信息
            showErrorMessage('确认密码和密码不匹配');
            return;
        }

        // 如果所有字段都合法，则提交表单
        fetch(url+'/changepwd',{method: 'POST', body: new FormData(event.target)}).then(response => response.json()).then(data => {alert(data.msg);});
    });

    function isValidEmail(email) {
        // 使用正则表达式验证电子邮件地址是否合法
        return /^\w+@\w+.\w+$/.test(email);
    }

    function isValidVerificationCode(code) {
        // 验证验证码是否合法
        // TODO: 在这里执行验证
        return /^\w{6}$/.test(code);
    }

    function isValidPassword(password) {
        // 验证密码是否至少包含 6 个字符
        return password.length >= 6;
    }

    function showErrorMessage(message) {
        // 在这里显示错误信息
        alert(message);
    }
</script>
</body>
</html>